<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>客服聊天-聚码网</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="./public/static/index/bui/bui.css">
    <script src="./public/static/index/bui/zepto.js"></script>
    <script src="./public/static/index/bui/bui.js"></script>
    <link rel="icon" href="./public/favicon.ico">
    <!-- 聊天在线状态管理 -->
    <script src="./public/static/index/js/chat-status.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html, body {
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
        }
        
        .chat-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: #f5f5f5;
        }
        
        .chat-header {
            background-color: #ff0057;
            color: #fff;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            height: 50px;
        }
        
        .chat-header .back-btn {
            color: #fff;
            font-size: 20px;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .chat-header .title {
            font-size: 18px;
            font-weight: bold;
            flex: 1;
            text-align: center;
        }
        
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 60px 10px 70px 10px;
            -webkit-overflow-scrolling: touch;
        }
        
        .message-item {
            margin-bottom: 15px;
            display: flex;
            animation: fadeIn 0.3s;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .message-item.customer {
            justify-content: flex-end;
        }
        
        .message-item.service {
            justify-content: flex-start;
        }
        
        .message-bubble {
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 18px;
            word-wrap: break-word;
            position: relative;
        }
        
        .message-item.customer .message-bubble {
            background-color: #ff0057;
            color: #fff;
            border-bottom-right-radius: 4px;
        }
        
        .message-item.service .message-bubble {
            background-color: #fff;
            color: #333;
            border-bottom-left-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .message-time {
            font-size: 11px;
            color: #999;
            margin-top: 5px;
            text-align: center;
        }
        
        .chat-input-area {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
            padding: 10px;
            display: flex;
            align-items: flex-end;
            z-index: 1000;
        }
        
        .chat-input-wrapper {
            flex: 1;
            display: flex;
            align-items: flex-end;
            background-color: #f5f5f5;
            border-radius: 20px;
            padding: 8px 15px;
            margin-right: 10px;
        }
        
        .chat-input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-size: 14px;
            max-height: 100px;
            min-height: 20px;
            resize: none;
            padding: 0;
            line-height: 20px;
        }
        
        .send-btn {
            background-color: #ff0057;
            color: #fff;
            border: none;
            border-radius: 20px;
            padding: 8px 20px;
            font-size: 14px;
            cursor: pointer;
            outline: none;
            min-width: 60px;
        }
        
        .send-btn:active {
            background-color: #e0004a;
        }
        
        .send-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #999;
            font-size: 14px;
        }
        
        .empty-message {
            text-align: center;
            padding: 50px 20px;
            color: #999;
            font-size: 14px;
        }
        
        .message-image {
            max-width: 200px;
            max-height: 200px;
            border-radius: 8px;
            margin-top: 5px;
            cursor: pointer;
        }
        
        .image-btn {
            background-color: transparent;
            border: none;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 20px;
            color: #666;
            outline: none;
        }
        
        .image-btn:active {
            opacity: 0.7;
        }
        
        .image-input {
            display: none;
        }
        
        .uploading {
            opacity: 0.6;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <a href="javascript:void(0);" id="backBtn" class="back-btn">← 返回</a>
            <div class="title">客服咨询</div>
            <div style="width: 40px;"></div>
        </div>
        
        <div class="chat-messages" id="chatMessages">
            <div class="loading">正在加载消息...</div>
        </div>
        
        <div class="chat-input-area">
            <input type="file" id="imageInput" class="image-input" accept="image/*">
            <button class="image-btn" id="imageBtn" title="发送图片">📷</button>
            <div class="chat-input-wrapper">
                <textarea class="chat-input" id="messageInput" placeholder="请输入消息..." rows="1"></textarea>
            </div>
            <button class="send-btn" id="sendBtn">发送</button>
        </div>
    </div>

    <script>
        // API配置
        var API_BASE_URL = "https://api.sc123.shop/";
        
        // 设置聊天状态管理的API地址
        if (window.ChatStatus) {
            window.ChatStatus.setApiBaseUrl(API_BASE_URL);
        }
        
        // 获取UUID（从ChatStatus获取，如果ChatStatus未加载则从localStorage获取）
        var clientUuid = (window.ChatStatus && window.ChatStatus.getClientUuid) 
            ? window.ChatStatus.getClientUuid() 
            : (function() {
                var uuid = localStorage.getItem('chat_client_uuid');
                if (!uuid) {
                    uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                        var r = Math.random() * 16 | 0;
                        var v = c == 'x' ? r : (r & 0x3 | 0x8);
                        return v.toString(16);
                    });
                    localStorage.setItem('chat_client_uuid', uuid);
                }
                return uuid;
            })();
        
        var goodsId = getUrlParam('goods_id') || 0;
        var pollTimer = null;
        var lastMessageId = 0;
        
        // 获取URL参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURIComponent(r[2]);
            return null;
        }
        
        // 格式化时间
        function formatTime(timestamp) {
            var date = new Date(timestamp * 1000);
            var now = new Date();
            var diff = now - date;
            
            if (diff < 60000) {
                return '刚刚';
            } else if (diff < 3600000) {
                return Math.floor(diff / 60000) + '分钟前';
            } else if (diff < 86400000) {
                return Math.floor(diff / 3600000) + '小时前';
            } else {
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                return month + '-' + day + ' ' + (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
            }
        }
        
        // 渲染消息
        function renderMessages(messages) {
            var container = document.getElementById('chatMessages');
            if (!messages || messages.length === 0) {
                container.innerHTML = '<div class="empty-message">暂无消息，开始对话吧~</div>';
                return;
            }
            
            var html = '';
            messages.forEach(function(msg) {
                var isCustomer = msg.sender_type == 1;
                var messageClass = isCustomer ? 'customer' : 'service';
                var time = formatTime(msg.create_time);
                
                html += '<div class="message-item ' + messageClass + '">';
                html += '<div class="message-bubble">';
                
                // 如果是图片消息
                if (msg.message_type == 2 && msg.image_url) {
                    var imageUrl = msg.image_url;
                    // 如果图片URL不是完整URL，添加API_BASE_URL前缀
                    if (imageUrl.indexOf('http') !== 0) {
                        imageUrl = API_BASE_URL + imageUrl;
                    }
                    html += '<img src="' + escapeHtml(imageUrl) + '" class="message-image" onclick="previewImage(this.src)" alt="图片">';
                    // 如果有文字描述，显示在图片下方
                    if (msg.message && msg.message !== '[图片]') {
                        // 调试信息
                        console.log('图片消息内容:', msg.message, '类型:', typeof msg.message);
                        
                        // 检查消息是否包含换行符（商品名称\n价格格式）
                        // 支持多种换行符：\n, \r\n, \r
                        var messageText = String(msg.message);
                        var messageLines = messageText.split(/\r?\n|\r/);
                        
                        console.log('消息行数:', messageLines.length, '内容:', messageLines);
                        console.log('消息原始内容（转义前）:', messageText);
                        console.log('消息原始内容（字符码）:', Array.from(messageText).map(c => c.charCodeAt(0)));
                        
                        if (messageLines.length >= 2) {
                            // 分行显示：第一行商品名称，第二行价格
                            var goodsNameLine = messageLines[0].trim();
                            var priceLine = messageLines[1].trim();
                            
                            console.log('商品名称行:', goodsNameLine);
                            console.log('价格行:', priceLine);
                            
                            // 根据消息发送者类型设置颜色
                            // 客户消息：背景是红色，文字应该用白色或浅色
                            // 客服消息：背景是白色，文字可以用深色和红色
                            var goodsNameColor = isCustomer ? '#fff' : '#333';
                            var priceColor = isCustomer ? '#fff' : '#ff0057';
                            
                            html += '<div style="margin-top: 8px; line-height: 1.6;">';
                            html += '<div style="font-weight: bold; margin-bottom: 6px; color: ' + goodsNameColor + '; font-size: 14px;">' + escapeHtml(goodsNameLine) + '</div>';
                            html += '<div style="color: ' + priceColor + '; font-weight: bold; font-size: 16px;">' + escapeHtml(priceLine) + '</div>';
                            html += '</div>';
                        } else if (messageLines.length === 1 && messageLines[0].trim()) {
                            // 单行显示（兼容旧格式）
                            console.log('单行显示:', messageLines[0].trim());
                            html += '<div style="margin-top: 5px;">' + escapeHtml(messageLines[0].trim()) + '</div>';
                        } else {
                            // 如果没有有效内容，不显示
                            console.log('消息内容为空或无效');
                        }
                    }
                } else {
                    // 文本消息
                    html += escapeHtml(msg.message);
                }
                
                html += '</div>';
                html += '</div>';
                
                // 更新最后一条消息ID
                if (msg.id > lastMessageId) {
                    lastMessageId = msg.id;
                }
            });
            
            container.innerHTML = html;
            scrollToBottom();
        }
        
        // 预览图片
        function previewImage(imageUrl) {
            // 可以在这里添加图片预览功能，比如打开新窗口或显示大图
            window.open(imageUrl, '_blank');
        }
        
        // HTML转义
        function escapeHtml(text) {
            var map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.replace(/[&<>"']/g, function(m) { return map[m]; });
        }
        
        // 滚动到底部
        function scrollToBottom() {
            var container = document.getElementById('chatMessages');
            container.scrollTop = container.scrollHeight;
        }
        
        // 加载消息
        function loadMessages() {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', API_BASE_URL + '/api/v1/chat/messages', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    try {
                        var response = JSON.parse(xhr.responseText);
                        if (response.code === 200 && response.data && response.data.list) {
                            renderMessages(response.data.list);
                        }
                    } catch (e) {
                        console.error('解析消息失败:', e);
                    }
                }
            };
            
            xhr.send(JSON.stringify({
                client_uuid: clientUuid,
                sender_type: 1,
                page: 1,
                pageSize: 50
            }));
        }
        
        // 发送消息（内部函数，不更新UI状态，返回Promise）
        function sendMessageInternal(messageText, imageUrl, messageType, skipUIUpdate, skipReload) {
            return new Promise(function(resolve, reject) {
                messageType = messageType || 1; // 1-文本，2-图片
                skipUIUpdate = skipUIUpdate || false; // 是否跳过UI更新（用于自动发送消息）
                skipReload = skipReload || false; // 是否跳过重新加载消息（用于连续发送多条消息）
                
                // 文本消息必须要有内容
                if (messageType == 1 && !messageText) {
                    reject(new Error('文本消息内容不能为空'));
                    return;
                }
                
                // 图片消息必须要有图片URL
                if (messageType == 2 && !imageUrl) {
                    reject(new Error('图片URL不能为空'));
                    return;
                }
                
                // 如果不是自动发送，需要更新UI状态
                var sendBtn = null;
                var input = null;
                if (!skipUIUpdate) {
                    sendBtn = document.getElementById('sendBtn');
                    input = document.getElementById('messageInput');
                    if (sendBtn) {
                        sendBtn.disabled = true;
                        sendBtn.textContent = '发送中...';
                    }
                }
                
                var xhr = new XMLHttpRequest();
                xhr.open('POST', API_BASE_URL + '/api/v1/chat/send', true);
                xhr.setRequestHeader('Content-Type', 'application/json');
                
                xhr.onload = function() {
                    if (!skipUIUpdate && sendBtn) {
                        sendBtn.disabled = false;
                        sendBtn.textContent = '发送';
                    }
                    
                    if (xhr.status >= 200 && xhr.status < 300) {
                        try {
                            var response = JSON.parse(xhr.responseText);
                            if (response.code === 200) {
                                if (!skipUIUpdate && input && messageType == 1) {
                                    input.value = '';
                                    input.style.height = 'auto';
                                }
                                // 只有在不跳过重新加载时才重新加载消息
                                if (!skipReload) {
                                    loadMessages();
                                }
                                // 发送成功，resolve Promise
                                resolve(response);
                            } else {
                                var errorMsg = response.msg || '未知错误';
                                if (!skipUIUpdate) {
                                    alert('发送失败：' + errorMsg);
                                } else {
                                    console.error('自动发送消息失败：', errorMsg);
                                }
                                reject(new Error(errorMsg));
                            }
                        } catch (e) {
                            console.error('解析响应失败:', e);
                            if (!skipUIUpdate) {
                                alert('发送失败，请重试');
                            }
                            reject(e);
                        }
                    } else {
                        var errorMsg = '发送失败，状态码：' + xhr.status;
                        if (!skipUIUpdate) {
                            alert(errorMsg);
                        }
                        reject(new Error(errorMsg));
                    }
                };
                
                xhr.onerror = function() {
                    if (!skipUIUpdate && sendBtn) {
                        sendBtn.disabled = false;
                        sendBtn.textContent = '发送';
                        alert('网络错误，请检查网络连接');
                    }
                    reject(new Error('网络错误'));
                };
                
                var sendData = {
                    client_uuid: clientUuid,
                    sender_type: 1,
                    message_type: messageType,
                    goods_id: goodsId
                };
                
                if (messageType == 1) {
                    sendData.message = messageText;
                } else {
                    sendData.image_url = imageUrl;
                    // 对于图片消息，保留原始消息文本（包括换行符）
                    sendData.message = messageText || '[图片]';
                }
                
                // 调试信息：打印发送的数据
                if (messageType == 2) {
                    console.log('发送图片消息数据:', JSON.stringify(sendData));
                    console.log('消息内容（原始）:', sendData.message);
                    console.log('消息内容（JSON）:', JSON.stringify(sendData.message));
                }
                
                xhr.send(JSON.stringify(sendData));
            });
        }
        
        // 发送消息（公开函数，更新UI状态）
        function sendMessage(messageText, imageUrl, messageType) {
            messageType = messageType || 1;
            var input = document.getElementById('messageInput');
            var message = messageText || input.value.trim();
            sendMessageInternal(message, imageUrl, messageType, false);
        }
        
        // 上传图片
        function uploadImage(file) {
            return new Promise(function(resolve, reject) {
                var formData = new FormData();
                formData.append('image', file);
                
                var xhr = new XMLHttpRequest();
                xhr.open('POST', API_BASE_URL + '/api/v1/chat/upload_image', true);
                
                xhr.onload = function() {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        try {
                            var response = JSON.parse(xhr.responseText);
                            if (response.code === 200) {
                                resolve(response.data.image_url);
                            } else {
                                reject(new Error(response.msg || '上传失败'));
                            }
                        } catch (e) {
                            reject(new Error('解析响应失败'));
                        }
                    } else {
                        reject(new Error('上传失败，状态码：' + xhr.status));
                    }
                };
                
                xhr.onerror = function() {
                    reject(new Error('网络错误'));
                };
                
                xhr.send(formData);
            });
        }
        
        // 发送图片
        function sendImage(imageUrl) {
            sendMessage('', imageUrl, 2);
        }
        
        // 自动发送商品第一张图片和价格消息
        function sendGoodsImage() {
            if (!goodsId || goodsId == 0) {
                return;
            }
            
            // 检查是否已经发送过商品图片（避免重复发送）
            var sentGoodsImageKey = 'sent_goods_image_' + goodsId;
            // if (localStorage.getItem(sentGoodsImageKey)) {
            //     return; // 已经发送过，不再发送
            // }
            
            // 获取商品详情
            var xhr = new XMLHttpRequest();
            xhr.open('POST', API_BASE_URL + '/api/v1/index/goods_detail?id=' + goodsId, true);
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    try {
                        var response = JSON.parse(xhr.responseText);
                        if (response.code === 200 && response.data) {
                            var goods = response.data;
                            
                            // 获取商品价格
                            // 优先使用打折价格（discount），如果没有或为0或无效，则使用原始价格（amount）
                            var goodsPrice = 0;
                            
                            // 尝试获取打折价格
                            var discountPrice = 0;
                            if (goods.discount !== undefined && goods.discount !== null && goods.discount !== '') {
                                discountPrice = parseFloat(goods.discount);
                            }
                            
                            // 尝试获取原始价格
                            var originalPrice = 0;
                            if (goods.amount !== undefined && goods.amount !== null && goods.amount !== '') {
                                originalPrice = parseFloat(goods.amount);
                            }
                            
                            // 检查打折价格是否有效（存在且为正数）
                            if (!isNaN(discountPrice) && discountPrice > 0) {
                                goodsPrice = discountPrice;
                            } else if (!isNaN(originalPrice) && originalPrice > 0) {
                                // 如果打折价格无效，使用原始价格
                                goodsPrice = originalPrice;
                            } else if (!isNaN(originalPrice) && originalPrice >= 0) {
                                // 即使价格为0也使用
                                goodsPrice = originalPrice;
                            }
                            
                            // 格式化价格，保留两位小数
                            var priceText = goodsPrice > 0 ? goodsPrice.toFixed(2) : '0.00';
                            
                            // 获取商品名称
                            var goodsName = (goods.goods_name && goods.goods_name.trim()) ? goods.goods_name.trim() : '商品';
                            
                            // 调试信息
                            console.log('商品信息:', {
                                goods: goods,
                                goodsName: goodsName,
                                goodsPrice: goodsPrice,
                                priceText: priceText,
                                discount: goods.discount,
                                discountPrice: discountPrice,
                                amount: goods.amount,
                                originalPrice: originalPrice
                            });
                            
                            // 准备价格消息（单独发送的文字消息）
                            var priceMessage = '老板你好，我想购买这些商品，合计金额为￥' + priceText + '元';
                            
                            // 准备图片消息的文字描述（商品名称 + 价格，换行显示）
                            // 第一行：商品名称，第二行：商品价格
                            // 确保价格格式正确：￥XX.XX
                            var imageMessageText = goodsName + '\n￥' + priceText;
                            
                            // 调试信息
                            console.log('图片消息文字内容:', imageMessageText);
                            console.log('图片消息文字内容（JSON）:', JSON.stringify(imageMessageText));
                            
                            // 发送商品图片（如果存在）
                            if (goods.goods_img) {
                                // 获取第一张图片
                                var images = goods.goods_img.split(';');
                                var firstImage = images[0].trim();
                                if (firstImage) {
                                    // 存储相对路径（如果图片URL是完整URL，提取相对路径）
                                    var imageUrl = firstImage;
                                    // 如果图片URL是完整URL，提取相对路径
                                    if (imageUrl.indexOf('http') === 0) {
                                        // 提取域名后的路径部分
                                        var urlObj = new URL(imageUrl);
                                        imageUrl = urlObj.pathname;
                                    }
                                    
                                    // 先发送图片消息，等待发送成功后再发送文字消息
                                    // 第一条消息跳过重新加载，等第二条消息发送成功后再一起加载
                                    console.log('开始发送图片消息，消息内容:', imageMessageText, '图片URL:', imageUrl);
                                    sendMessageInternal(imageMessageText, imageUrl, 2, true, true)
                                        .then(function(response) {
                                            // 图片消息发送成功
                                            console.log('图片消息发送成功，响应:', response);
                                            // 等待一段时间，确保图片消息的时间戳早于文字消息
                                            // 延迟500毫秒，确保服务器时间戳有足够差异
                                            return new Promise(function(resolve) {
                                                setTimeout(function() {
                                                    console.log('延迟结束，开始发送价格消息...');
                                                    // 发送第二条消息（文字），发送成功后重新加载消息列表
                                                    sendMessageInternal(priceMessage, '', 1, true, false)
                                                        .then(function(textResponse) {
                                                            console.log('价格消息发送成功，响应:', textResponse);
                                                            resolve(textResponse);
                                                        })
                                                        .catch(function(error) {
                                                            console.error('价格消息发送失败:', error);
                                                            resolve(error); // 即使失败也继续，确保能刷新消息列表
                                                        });
                                                }, 500); // 延迟500毫秒，确保时间戳有足够差异
                                            });
                                        })
                                        .then(function() {
                                            // 两条消息都发送完成，重新加载消息列表
                                            console.log('所有消息发送完成，重新加载消息列表');
                                            // 再延迟一下，确保服务器已经保存了所有消息
                                            setTimeout(function() {
                                                loadMessages();
                                                // 标记已发送
                                                localStorage.setItem(sentGoodsImageKey, '1');
                                            }, 200);
                                        })
                                        .catch(function(error) {
                                            // 发送失败，记录错误但仍标记已发送，避免重复发送
                                            console.error('发送消息失败:', error);
                                            // 即使失败也重新加载一次消息列表，确保已发送的消息能显示
                                            setTimeout(function() {
                                                loadMessages();
                                                localStorage.setItem(sentGoodsImageKey, '1');
                                            }, 200);
                                        });
                                } else {
                                    // 没有有效图片，直接发送价格消息
                                    sendMessageInternal(priceMessage, '', 1, true)
                                        .then(function() {
                                            console.log('价格消息发送成功');
                                            localStorage.setItem(sentGoodsImageKey, '1');
                                        })
                                        .catch(function(error) {
                                            console.error('发送价格消息失败:', error);
                                            localStorage.setItem(sentGoodsImageKey, '1');
                                        });
                                }
                            } else {
                                // 没有商品图片，直接发送价格消息
                                sendMessageInternal(priceMessage, '', 1, true)
                                    .then(function() {
                                        console.log('价格消息发送成功');
                                        localStorage.setItem(sentGoodsImageKey, '1');
                                    })
                                    .catch(function(error) {
                                        console.error('发送价格消息失败:', error);
                                        localStorage.setItem(sentGoodsImageKey, '1');
                                    });
                            }
                        }
                    } catch (e) {
                        console.error('解析商品详情失败:', e);
                    }
                }
            };
            
            xhr.send();
        }
        
        // 在线状态管理由 chat-status.js 自动处理，无需手动更新
        // 但发送消息时可以手动触发一次状态更新
        function updateOnlineStatus() {
            if (window.ChatStatus && window.ChatStatus.updateStatus) {
                window.ChatStatus.updateStatus();
            }
        }
        
        // 轮询新消息
        function pollNewMessages() {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', API_BASE_URL + '/api/v1/chat/messages', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    try {
                        var response = JSON.parse(xhr.responseText);
                        if (response.code === 200 && response.data && response.data.list) {
                            var messages = response.data.list;
                            // 检查是否有新消息
                            var hasNewMessage = false;
                            messages.forEach(function(msg) {
                                if (msg.id > lastMessageId && msg.sender_type == 2) {
                                    hasNewMessage = true;
                                }
                            });
                            
                            if (hasNewMessage) {
                                renderMessages(messages);
                            }
                        }
                    } catch (e) {
                        console.error('轮询消息失败:', e);
                    }
                }
            };
            
            xhr.send(JSON.stringify({
                client_uuid: clientUuid,
                sender_type: 1,
                page: 1,
                pageSize: 50
            }));
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载消息
            loadMessages();
            
            // 在线状态管理由 chat-status.js 自动处理，无需手动更新
            
            // 轮询新消息
            pollTimer = setInterval(pollNewMessages, 3000); // 每3秒轮询一次
            
            // 返回按钮点击事件 - 只返回，不通知离线
            // 在线状态管理由 chat-status.js 自动处理，页面跳转时不会标记为离线
            document.getElementById('backBtn').addEventListener('click', function(e) {
                e.preventDefault();
                // 清除消息轮询定时器
                if (pollTimer) {
                    clearInterval(pollTimer);
                    pollTimer = null;
                }
                // 返回上一页（在线状态由 chat-status.js 管理）
                history.back();
            });
            
            // 发送按钮点击
            document.getElementById('sendBtn').addEventListener('click', function() {
                sendMessage();
                // 发送消息时立即更新在线状态
                updateOnlineStatus();
            });
            
            // 图片按钮点击
            document.getElementById('imageBtn').addEventListener('click', function() {
                document.getElementById('imageInput').click();
            });
            
            // 图片选择
            document.getElementById('imageInput').addEventListener('change', function(e) {
                var file = e.target.files[0];
                if (file) {
                    // 验证文件类型
                    if (!file.type.match('image.*')) {
                        alert('请选择图片文件');
                        return;
                    }
                    
                    // 验证文件大小（5MB）
                    if (file.size > 5 * 1024 * 1024) {
                        alert('图片大小不能超过5MB');
                        return;
                    }
                    
                    // 显示上传中
                    var sendBtn = document.getElementById('sendBtn');
                    sendBtn.disabled = true;
                    sendBtn.textContent = '上传中...';
                    var chatInputArea = document.querySelector('.chat-input-area');
                    if (chatInputArea) {
                        chatInputArea.classList.add('uploading');
                    }
                    
                    // 上传图片
                    uploadImage(file).then(function(imageUrl) {
                        // 发送图片消息
                        sendImage(imageUrl);
                        // 清空文件选择
                        document.getElementById('imageInput').value = '';
                        // 发送消息时立即更新在线状态
                        updateOnlineStatus();
                    }).catch(function(error) {
                        alert('图片上传失败：' + error.message);
                    }).finally(function() {
                        sendBtn.disabled = false;
                        sendBtn.textContent = '发送';
                        var chatInputArea = document.querySelector('.chat-input-area');
                        if (chatInputArea) {
                            chatInputArea.classList.remove('uploading');
                        }
                    });
                }
            });
            
            // 输入框回车发送
            var input = document.getElementById('messageInput');
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                    // 发送消息时立即更新在线状态
                    updateOnlineStatus();
                }
            });
            
            // 自动调整输入框高度
            input.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = Math.min(this.scrollHeight, 100) + 'px';
            });
            
            // 如果有商品ID，自动发送商品第一张图片
            if (goodsId && goodsId != 0) {
                // 延迟一下，等消息加载完成后再发送图片
                setTimeout(function() {
                    sendGoodsImage();
                }, 1000);
            }
        });
        
        // 页面关闭/隐藏时的离线通知由 chat-status.js 自动处理
        // 但需要处理消息轮询的清理和恢复
        
        // 页面卸载时清理消息轮询定时器
        window.addEventListener('beforeunload', function() {
            if (pollTimer) {
                clearInterval(pollTimer);
                pollTimer = null;
            }
        });
        
        // 页面隐藏时暂停消息轮询，显示时恢复
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                // 页面隐藏时，暂停消息轮询
                if (pollTimer) {
                    clearInterval(pollTimer);
                    pollTimer = null;
                }
            } else {
                // 页面重新显示时，恢复消息轮询
                if (!pollTimer) {
                    pollTimer = setInterval(pollNewMessages, 3000);
                }
                // 立即加载一次消息
                loadMessages();
            }
        });
        
        // 页面从缓存中恢复时（bfcache）- 用户返回页面
        window.addEventListener('pageshow', function(e) {
            // 恢复消息轮询
            if (!pollTimer) {
                pollTimer = setInterval(pollNewMessages, 3000);
            }
            // 立即加载一次消息
            loadMessages();
        });
        
        // 页面获得焦点时恢复消息轮询
        window.addEventListener('focus', function() {
            if (!pollTimer) {
                pollTimer = setInterval(pollNewMessages, 3000);
            }
            // 立即加载一次消息
            loadMessages();
        });
    </script>
</body>
</html>

